<script setup>
/**导入组件**/
import {CaretBottom, SwitchButton, User} from '@element-plus/icons-vue';
import {useRouter} from 'vue-router';
import {ElMessage, ElMessageBox,ElDialog} from 'element-plus';
import DarkModeSlider from '@/components/DarkModeSlider.vue';
import SmallWindow from '@/components/SmallWindow.vue';
import {userInfoService} from '@/api/user.js';
import useUserInfoStore from '@/stores/userInfo.js';
import {useTokenStore} from '@/stores/token.js';
import {useThemeStore} from '@/stores/theme.js';
import {computed, ref} from 'vue';


/**初始化**/
const router = useRouter();
const tokenStore = useTokenStore();
const userInfoStore = useUserInfoStore();
const themeStore = useThemeStore();
const logoUrl = computed(() => themeStore.logoUrl);
const role = ref(localStorage.getItem('role') || 'user');


// 获取用户信息
const getUserInfo = async () => {
  const userId = userInfoStore.info.userId; // 从 Pinia 中获取用户 ID
  if (!userId) {
    console.error('用户 ID 未定义');
    return;
  }
  try {
    const result = await userInfoService(userId); // 传递 userId 参数
    userInfoStore.setInfo(result.data.data); // 更新 Pinia 中的用户信息
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
};

const handleCommand = (command) => {
  if (command === 'logout') {
    ElMessageBox.confirm('您确认要退出吗?', '温馨提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
        .then(() => {
          tokenStore.removeToken();
          userInfoStore.removeInfo();
          localStorage.removeItem('role');
          router.push('/login');
          ElMessage.success('退出登录成功');
        })
        .catch(() => {
          ElMessage.info('用户取消了退出登录');
        });
  } else {
    router.push(command);
  }
};



getUserInfo();
</script>

<template>
  <el-container class="layout-container">
    <el-aside width="200px">
      <div class="aside-first">
        <el-image :src="logoUrl" :fit="'scale-down'"/>
      </div>


      <el-menu
          active-text-color="#ffd04b"
          background-color="#232323"
          text-color="#fff"
          :default-active="$route.path"
          router>
        <el-menu-item index="/home">
          <el-icon>
            <HomeFilled/>
          </el-icon>
          <span>首页</span>
        </el-menu-item>

        <template v-if="role === 0">
          <el-sub-menu index="admin-users">
            <template #title>
              <el-icon>
                <User/>
              </el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/admin/users">
              <el-icon>
                <User/>
              </el-icon>
              <span>用户列表</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="admin-questions">
            <template #title>
              <el-icon>
                <User/>
              </el-icon>
              <span>题目管理</span>
            </template>
            <el-menu-item index="/admin/questions">
              <el-icon>
                <User/>
              </el-icon>
              <span>题目审核</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="admin-settings">
            <template #title>
              <el-icon>
                <User/>
              </el-icon>
              <span>系统设置</span>
            </template>
            <el-menu-item index="/admin/settings">
              <el-icon>
                <User/>
              </el-icon>
              <span>系统配置</span>
            </el-menu-item>
          </el-sub-menu>
        </template>

        <template v-else>
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Menu/>
              </el-icon>
              <span>智能功能</span>
            </template>
            <el-menu-item index="/intelligent-408-qna">
              <el-icon>
                <ChatDotRound/>
              </el-icon>
              <span>智能化408答疑</span>
            </el-menu-item>
            <el-menu-item index="/intelligent-408-search">
              <el-icon>
                <Search/>
              </el-icon>
              <span>智能408搜题</span>
            </el-menu-item>
            <el-menu-item index="/ai-question">
              <el-icon>
                <Aim/>
              </el-icon>
              <span>AI出题</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Reading/>
              </el-icon>
              <span>学习功能</span>
            </template>
            <el-menu-item index="/personalized-exercises">
              <el-icon>
                <DocumentChecked/>
              </el-icon>
              <span>408习题训练</span>
            </el-menu-item>
            <el-menu-item index="/error-book">
              <el-icon>
                <Tickets/>
              </el-icon>
              <span>错题本</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <Tools/>
              </el-icon>
              <span>学习工具</span>
            </template>
            <el-menu-item index="/clock">
              <el-icon>
                <Clock/>
              </el-icon>
              <span>学习钟计时</span>
            </el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>

 


    </el-aside>


    <el-container>
      <el-header>
        <div><strong>{{ userInfoStore.info.username }}</strong></div>
        <dark-mode-slider></dark-mode-slider>
        <el-dropdown placement="bottom-end" @command="handleCommand">
          <span class="el-dropdown__box">
            <el-avatar
                :src="userInfoStore.info.avatarUrl ? userInfoStore.info.avatarUrl : 'https://img2.baidu.com/it/u=3926734404,2114692953&fm=253&fmt=auto&app=138&f=JPEG?w=807&h=800'"/>
            <el-icon><CaretBottom/></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <!-- <el-dropdown-item command="/personal/Info" :icon="User">基本资料</el-dropdown-item>-->
              <!--<el-dropdown-item command="/personal/ChangeAvatar" :icon="Crop">更换头像</el-dropdown-item>-->
              <el-dropdown-item command="/personal/ChangePassword" :icon="SwitchButton">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main class="el-main">
        <router-view></router-view>
      </el-main>
      <el-footer>基于Deepseek的408考研小助手</el-footer>
    </el-container>
    <small-window></small-window>
    
    
    <!-- 知识图谱弹窗 -->
    <el-dialog
      v-model="knowledgeGraphDialog"
      title="知识图谱"
      width="50%"
    >
      <div v-html="knowledgeGraphContent"></div>
    </el-dialog>

    
  </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;

  .el-aside {
    background-color: #232323;
    position: relative;

    .aside-first {
      @include hold(100, 10);
      @include position-center-box("row,column");
    }


    .el-menu {
      border-right: none;
      //--el-menu-bg-color: $global-background-color;
      //--el-menu-text-color: #FFFFFF;
      //--el-menu-active-color: #ffd04b;
    }
     .button-group {
      position: absolute;
      bottom: 20px;
      left: 100px;
      transform: translateX(-50%);
      display: flex;
      gap: 0px;

      .circle-button {
        width: 25px;
        height: 27px;
        border-radius: 50%;
        background-color: white;
        color: black;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }
    }
  }


  .el-header {
    background-color: $global-background-color;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }

  .el-main {
    background-color: $global-background-color;
  }

  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}
</style>